<template>
  <van-row class="user_info_wrap">
    <van-col span="24" class="head_login">
      <van-image v-if="user_info.avatar" :src="handle_pic(user_info.avatar)" fit="cover" class="user_icon" />
      <van-image v-else :src="require('@/assets/images/head_icon.png')" fit="cover" class="user_icon" />
      <van-col
        v-if="!user_info.username"
        span="10"
        class="login-right"
        @click="clickLogin"
      >
        <p class="login_now">立即登录</p>
        <p class="login_text">点击登录，精彩永不丢失</p>
      </van-col>
      <van-col v-else span="10" class="login-right">
        <p class="login_now">{{ user_info.username }}</p>
        <p class="login_text">{{ user_info.description || '开心快乐每一天' }}</p>
      </van-col>
      <i
        v-if="user_info.username"
        class="iconfont icon-shezhi set_icon"
        @click="goSet"
      />
    </van-col>
    <van-col span="24" class="creation_wrap">
      <van-col span="12" class="creation_item right_border" @click="queryArticle">
        <span class="item_num">{{ user_info.count || 0 }}</span>
        <span class="item_text">创作</span>
      </van-col>
      <span class="line_center" />
      <van-col span="12" class="creation_item">
        <span class="item_num">{{ user_info.zan_nums || 0 }}</span>
        <span class="item_text">获赞</span>
      </van-col>
    </van-col>
    <van-col span="24" class="swipe_wrap">
      <van-swipe autoplay="4000" duration="1000" class="my-swipe">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <van-image :src="require(`@/assets/images/${image}`)" class="goods-pic" fit="cover" radius="6">
            <template v-slot:loading>
              <van-loading type="spinner" size="30" />
            </template>
          </van-image>
        </van-swipe-item>
      </van-swipe>
    </van-col>
    <van-popup
      :style="{ height: '70%' }"
      v-model="showPopup"
      round
      position="bottom"
      class="popup_login"
      @close="resetValidation"
    >
      <van-form ref="submitForm">
        <van-field
          :rules="[{ required: true, message: '请填写用户名' }]"
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
        />
        <van-field
          :rules="[{ required: true, message: '请填写密码' }]"
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="goLogin"
          >提 交</van-button
          >
          <van-button
            style="margin-top: 16px"
            round
            block
            type="primary"
            native-type="submit"
            @click="goRegister"
          >注 册</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </van-row>
</template>

<script>
import api from '@/api/user'
import { setToken } from '@/utils/auth'
export default {
  data() {
    return {
      user_info: {},
      showPopup: false,
      username: '',
      password: '',
      images: [
        'banner01.jpeg',
        'banner02.jpg',
        'banner03.jpeg'
      ]
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    // getTotal() {
    //   api.getCount()
    //     .then(res => {
    //       if (parseInt(res.code) === 200) {
    //         this.total_info = res.result
    //       } else {
    //         this.$toast.fail(res.msg)
    //       }
    //     })
    // },
    goSet() {
      this.$router.push({ name: 'SetingInfo' })
    },
    queryArticle() {
      this.$router.push({ name: 'UserArticleList' })
    },
    getUserInfo() {
      api.loginInfo().then((res) => {
        this.$toast.clear()
        if (res.code === 200) {
          this.user_info = res.result
        }
      })
    },
    clickLogin() {
      this.showPopup = true
    },
    resetValidation() {
      this.$refs.submitForm.resetValidation()
    },
    goLogin() {
      if (!this.username) {
        this.$toast.fail('请填写账户名')
        return
      }
      if (!this.password) {
        this.$toast.fail('请填写密码')
        return
      }
      const data = { username: this.username, password: this.password }
      api.login(data).then((res) => {
        if (parseInt(res.code) === 200) {

          this.$toast.success('登录成功')
          setToken(res.result.token)
          this.user_info = res.result
          this.showPopup = false
          // this.getTotal()
        } else {
          this.$toast.fail(res.msg)
        }
      })
    },
    goRegister() {
      this.$router.push({ name: 'UserRegister' })
    }
  }
}
</script>

<style lang="less" scoped>
.user_info_wrap {
  .head_login {
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 25px;
    background-color: rgba(153, 153, 153, 0.1);
    .user_icon {
      width: 50px;
      height: 50px;
      margin-right: 10px;
      /deep/ img {
        border-radius: 50%;
      }
    }
    .login-right {
      height: 37px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .login_now {
        font-weight: 500;
        font-size: 15px;
      }
      .login_text {
        font-size: 6px;
        color: #666;
      }
    }
    .set_icon {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #666;
    }
  }
  .creation_wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    .creation_item{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 50px;
      .item_num{
        font-size: 16px;
        font-weight: 600;
      }
      .item_text{
        margin-top: 5px;
        font-size: 12px;
      }
    }
    .line_center{
      border-left: 1px solid #666;
      height: 25px;
      display: inline-block;
    }
  }
  .swipe_wrap{
    height: 100%;
    padding: 10px;
    background-color: rgba(153, 153, 153, 0.1);
    .my-swipe {
      border-radius: 10px;
      .van-swipe-item {
        height: 150px;
        color: #fff;
        font-size: 20px;
        /deep/ .goods-pic img{
          height: 150px;
          border-radius: 10px;
        }
        /deep/ .van-swipe__indicator{
          width: 4px;
          height: 4px;
          background: #FFFFFF;
          opacity: inherit;
        }
        /deep/ .van-swipe__indicator--active{
          width: 12px;
          height: 4px;
          border-radius: 2px;
          background: #FFFFFF;
        }
      }
    }
  }
  .popup_login {
    padding-top: 20px;
  }
}
</style>
